How to use flag-icons
1. Import the CSS
First, include the CSS in your project using one of these methods:
import "flag-icons/css/flag-icons.min.css";
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css" />
2. Use in your HTML
Add the classes .fi and
.fi-xx to an empty span to display
a flag inline. Replace xx with the
ISO 3166-1-alpha-2 code of the country.
<span class="fi fi-us"></span> United States
For square format flags, add the
fis class:
<span class="fi fi-us fis"></span> United States
3. Tips
- Click on any flag on this page to copy its HTML code
-
For applying flags as backgrounds, use the
fib class
-
All flags are available in both 4:3 and 1:1 (square) formats
-
Use the built-in search and filter functionality to find specific
flags